<template>
    <el-dialog v-model="dialogVisible" :before-close="handleClose_1" title="新增会议室" width="40%" :close-on-press-escape="false">
        <el-form ref="chamberFormRef" :model="formData" :rules="rules" label-position="left" label-suffix="：">
            <el-row>
                <el-col :span="24" class="grid-cell">
                    <el-form-item label="会议室名称" prop="chamberName">
                        <el-input v-model="formData.chamberName" clearable
                                  placeholder="例如：xxx会议室" type="text"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="grid-cell">
                    <el-form-item label="会议室地址" prop="address">
                        <el-input v-model="formData.address" clearable
                                  placeholder="请输入会议室的所在地址" type="text"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="grid-cell">
                    <el-form-item label="可容纳人数" prop="maxCapacity">
                        <el-input-number :min="5" v-model="formData.maxCapacity" placeholder="填写一个正数" controls-position="right"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="grid-cell">
                    <el-form-item label="当前状态" prop="status">
                        <el-radio-group v-model="formData.status">
                            <el-radio v-for="(item, index) in statusRadio" :key="index"
                                      :label="item.value" style="{display: inline}">
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="grid-cell">
                    <el-form-item label="会议室配置" prop="config">
                        <el-input v-model="formData.config" placeholder="请输入5个字以上的文字描述"
                                  rows="3" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
          <el-button @click="handleClose_1">取 消</el-button>
          <el-button type="primary" @click="submitAdd">确 定</el-button>
        </template>
    </el-dialog>
</template>

<script>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {addchember} from "../../../../network/adm/chamber";
import {ElMessage} from "element-plus";

export default {
    name: "ChamberForm",
    setup(props,{emit}){
        let globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const dialogVisible = ref(false);
        const chamberFormRef = ref(null);
        const form = reactive({
            formData: {
                chamberName: null,
                address: null,
                maxCapacity: null,
                status: 0,
                config: null
            },
            rules: {
                chamberName:[
                    {required: true,message: '请填写会议室名称',trigger: 'blur'}
                ],
                address: [
                    {required: true,message: '请填写会议室地址',trigger: 'blur'}
                ],
                maxCapacity: [
                    {required: true,message: '请填写会议室容纳人数',trigger: 'blur'}
                ],
                status: 0,
                config: null
            },
            submitAdd(){
                chamberFormRef.value.validate((valid)=>{
                    if(valid){
                        addchember(form.formData).then(vo=>{
                            globalProperties.$response.handle({
                                data: vo,
                                success: '新增成功',
                                error: '新增失败',
                                successFn:()=>{

                                    emit('refresh-data');

                                    dialogVisible.value = false;
                                },
                                log: '新增结果'
                            })
                        })
                    }else{
                        ElMessage.error('请先完善表单');
                    }
                })
            }
        })
        return {
            ...toRefs(form),
            dialogVisible,
            chamberFormRef
        }
    },
    data(){
        return{
            statusRadio: [
                {
                    "label": "启用",
                    "value": 0
                },
                {
                    "label": "停用",
                    "value": 1
                },
                {
                    "label": "使用中",
                    "value": 2
                }
            ],
        }
    },
    methods: {
        handleClose_1() {
            this.$confirm('确认关闭？')
                .then((_) => {
                    this.dialogVisible = false;
                })
                .catch((_) => {

                })
        }
    }
}
</script>

<style scoped>

</style>
